<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
.div-a {
	float: left;
	width: 49%
}

.div-b {
	float: left;
	width: 49%
}

.div-c {
	float: left;
	width: 49%
}

.div-d {
	float: left;
	width: 49%
}
</style>
<!-- 引入 echarts.js -->
<script src="static/js/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="div-a" id="one" style="height: 400px;"></div>
	<div class="div-b" id="two" style="height: 400px;"></div>
	<div class="div-c" id="three" style="height: 400px;"></div>
	<div class="div-d" id="four" style="height: 400px;"></div>
	<script type="text/javascript">
		// 
		var oneChart = document.getElementById('one');
		var twoChart = document.getElementById('two');
		var threeChart = document.getElementById('three');
		var fourChart = document.getElementById('four');

		//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
		var resizeWorldMapContainer = function() {
			oneChart.style.width = (window.innerWidth / 2 - 20) + 'px';
			oneChart.style.height = (window.innerHeight / 2 - 20) + 'px';

			twoChart.style.width = (window.innerWidth / 2 - 20) + 'px';
			twoChart.style.height = (window.innerHeight / 2 - 20) + 'px';

			threeChart.style.width = (window.innerWidth / 2 - 20) + 'px';
			threeChart.style.height = (window.innerHeight / 2 - 20) + 'px';

			fourChart.style.width = (window.innerWidth / 2 - 20) + 'px';
			fourChart.style.height = (window.innerHeight / 2 - 20) + 'px';
		};
		//设置容器高宽
		resizeWorldMapContainer();
		// 基于准备好的dom，初始化echarts实例
		var myOneChart = echarts.init(oneChart);
		var myTwoChart = echarts.init(twoChart);
		var myThreeChart = echarts.init(threeChart);
		var myFourChart = echarts.init(fourChart);

		//one option
		optionOne = {
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        show:false
			    },
			    color:['#00b0f0','#fe0000'],
			    series: [
			        {
			            name:'综合利用率',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {	//饼图数据显示位置配置
			                normal: {
			                    show: true,
			                    position: 'inside',
			                    textStyle : {
			                    	color: '#000',
			                    	fontSize : 12
			                    },
			                    formatter: '{d}%'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:93, name:'OEE'},
			                {value:7, name:'综合利用率'}
			            ]
			            
			        }
			    ]
			};

		setInterval(function() {
			optionOne.series[0].data[0].value = (Math.random() * 20 + 80).toFixed(2) - 0;
			optionOne.series[0].data[1].value = (100 - (Math.random() * 20 + 80).toFixed(2) - 0);
			myOneChart.setOption(optionOne, true);
		}, 5000); 
		//two 
		optionTwo = {
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        show:false
			    },
			    color:['#00b0f0','#fe0000'],
			    series: [
			        {
			            name:'综合利用率',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			            	normal: {
			            		show: true,
			                    position: 'inside',
			                    textStyle : {
			                    	color: '#000',
			                    	fontSize : 12
			                    },
			                    formatter: '{d}%'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:89, name:'OEE'},
			                {value:11, name:'综合利用率'}
			            ]  
			        }
			    ]
			};

		setInterval(function() {
			optionTwo.series[0].data[0].value = (Math.random() * 20 + 80).toFixed(2) - 0;
			optionTwo.series[0].data[1].value = (100 - (Math.random() * 20 + 80).toFixed(2) - 0);
			myTwoChart.setOption(optionTwo, true);
		}, 5000);
		// three
		var optionThree = {
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        show:false
			    },
			    color:['#00b0f0','#fe0000'],
			    series: [
			        {
			            name:'综合利用率',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                	show: true,
			                    position: 'inside',
			                    textStyle : {
			                    	color: '#000',
			                    	fontSize : 12
			                    },
			                    formatter: '{d}%'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:94, name:'OEE'},
			                {value:6, name:'综合利用率'}
			            ]
			        }
			    ]
			};

		setInterval(function() {
			optionThree.series[0].data[0].value = (Math.random() * 20 + 80).toFixed(2) - 0;
			optionThree.series[0].data[1].value = (100 - (Math.random() * 20 + 80).toFixed(2) - 0);
			myThreeChart.setOption(optionThree, true);
		}, 5000);
		// four
		var optionFour = {
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        show:false
			    },
			    color:['#00b0f0','#fe0000'],
			    series: [
			        {
			            name:'综合利用率',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                	show: true,
			                    position: 'inside',
			                    textStyle : {
			                    	color: '#000',
			                    	fontSize : 12
			                    },
			                    formatter: '{d}%'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:92, name:'OEE'},
			                {value:8, name:'综合利用率'}
			            ]
			        }
			    ]
			};

		setInterval(function() {
			optionFour.series[0].data[0].value = (Math.random() * 20 + 80).toFixed(2) - 0;
			optionFour.series[0].data[1].value = (100 - (Math.random() * 20 + 80).toFixed(2) - 0);
			myFourChart.setOption(optionFour, true);
		}, 5000);

		var app = 11;

		// 使用刚指定的配置项和数据显示图表。
		myOneChart.setOption(optionOne);
		myTwoChart.setOption(optionTwo);
		myThreeChart.setOption(optionThree);
		myFourChart.setOption(optionFour);

		//one
		setInterval(function() {
			// 使用刚指定的配置项和数据显示图表。
			myOneChart.setOption(optionOne);
			myTwoChart.setOption(optionTwo);
			myThreeChart.setOption(optionThree);
			myFourChart.setOption(optionFour);
			//用于使chart自适应高度和宽度
			window.onresize = function() {
				//重置容器高宽
				resizeWorldMapContainer();
				myOneChart.resize();
				myTwoChart.resize();
				myThreeChart.resize();
				myFourChart.resize();
			};
		}, 5000);
	</script>
</body>
</html>